<template>
  <s-modal title="新增" :visible="visible" width="800px" ok-text="保存" :confirm-loading="confirmLoading"
    :closable="!confirmLoading" @ok="save()" @cancel="() => { if (!confirmLoading) { visible = false } }">
    <div style="height:400px">
      <s-scroll>
        <s-form ref="form" :value="formValue">
          <s-form-item label="名称" size="middle" name="name" :colon="true" :display-title="true"
            :rules="[{ 'whitespace': true, 'required': true, 'message': '名称不能为空' }, { 'max': 30, 'message': '最长为30位' }]">
            <s-input :allow-clear="true" placeholder="请输入名称" v-model="formValue.name" />
          </s-form-item>
          <s-form-item label="分类 " size="middle" name="type" :colon="true" :display-title="true"
            :rules="[{ 'whitespace': true, 'required': true, 'message': '分类 不能为空' }]">
            <s-select :allow-clear="true" placeholder="请输入分类 " :show-search="true" code="APP_TYPE"
              v-model="formValue.type" />
          </s-form-item>
          <s-form-item label="图标地址" size="middle" name="icon" :colon="true" :display-title="true"
            :rules="[{ 'whitespace': true, 'required': true, 'message': '图标地址不能为空' }]">
            <s-icon-select :allow-clear="true" placeholder="请输入图标地址" v-model="formValue.icon" />
          </s-form-item>
          <s-form-item label="地址" size="middle" name="url" :colon="true" :display-title="true"
            :rules="[{ 'whitespace': true, 'required': true, 'message': '地址不能为空' }, { 'max': 255, 'message': '最长为255位' }]">
            <s-input :allow-clear="true" placeholder="请输入地址" v-model="formValue.url" />
          </s-form-item>
          <s-form-item label="简介" size="middle" name="desc" :colon="true" :display-title="true"
            :rules="[{ 'whitespace': true, 'required': true, 'message': '简介不能为空' }, { 'max': 65535, 'message': '最长为65535位' }]">
            <s-input :allow-clear="true" placeholder="请输入简介" v-model="formValue.desc" />
          </s-form-item>
          <s-form-item label="排序" size="middle" name="sorts">
            <s-input-number placeholder="请输入排序" v-model="formValue.sorts" />
          </s-form-item>
          <s-form-item label="状态" size="middle" name="status" :colon="true" :display-title="true">
            <s-switch :allow-clear="false" placeholder="请输入状态" check-value="1" un-check-value="0"
              v-model="formValue.status" />
          </s-form-item>

        </s-form>
      </s-scroll>
    </div>
  </s-modal>
</template>

<script>

export default {
  name: 'Add',
  emits: ['change'],
  data() {
    return {
      formValue: {},
      confirmLoading: false,
      visible: false
    }
  },
  methods: {
    open() {
      this.formValue = {}
      this.visible = true
    },
    save() {
      const _this = this
      const form = this.$refs.form
      form.validate((values, fullValue) => {

        this.confirmLoading = true
        this.$api.PUT('/modules/myApp/insert', values).then(res => {
          this.confirmLoading = false
          this.visible = false
          this.$emit('success');
          this.$message.info(res.msg)
        }).catch(() => {
          this.confirmLoading = false
        })
      })
    }
  }
}
</script>

<style lang="less" scoped></style>